<script lang="ts" setup>
import { reactive } from 'vue';
import { UserOutlined, LockOutlined } from '@ant-design/icons-vue';
import type { Rule } from 'ant-design-vue/es/form';
import type {LoginParams} from "@/api/Sign.ts";
import {message} from "ant-design-vue";
import {SinApi} from "@/api/SignApi.ts";
import {useUserInfoStore} from "@/stores/UserInfo.ts";
import {useRouter} from "vue-router";

const userInfoStore = useUserInfoStore();
const router = useRouter();
const formState = reactive<LoginParams>({
  account: '',
  password: '',
});
const rules: Record<string, Rule[]> = {
  account: [{ required: true, message: '请输入账号', trigger: 'change' }],
  password: [{ required: true, message: '请输入密码', trigger: 'change' }],
};

const onFinish =async (values:LoginParams) => {
  try {
    const user = await SinApi.login(values);
    userInfoStore.setUser(user);
    message.success("登录成功");
    // 跳转到首页
    await router.push('/');
  }catch (error){
    message.error("账号或密码不正确，请重新输入")
  }

};

const onFinishFailed = (errorInfo: any) => {
  message.error("账号或密码不正确，请重新输入")
};
</script>

<template>
  <div class="mx-auto w-[1080px] flex justify-center">
    <a-card class="w-5/12 mt-20 shadow-2xl rounded-3xl">
      <div class="flex justify-center mb-6">
        <img src="/src/assets/imgs/logo.png" alt="信工图标" class="w-20 h-20 mr-2">
        <p class="text-xl justify-center pt-8">HZIEE OJ</p>
      </div>
      <h1 class="text-2xl mb-6 ml-2">账号密码登录</h1>
      <a-form
      :model="formState"
      :rules="rules"
      @finish="onFinish"
      @finishFailed="onFinishFailed"
      >
        <a-form-item
          name="account"
          class="flex justify-center"
        >
          <a-input class="w-96" v-model:value="formState.account" placeholder="请输入账号">
            <template #prefix>
              <UserOutlined style="color: rgba(0, 0, 0, 0.25)" />
            </template>
          </a-input>
        </a-form-item>

        <a-form-item
          name="password"
          class="flex justify-center mb-8"
        >
          <a-input-password class="w-96" v-model:value="formState.password"  placeholder="请输入密码">
            <template #prefix>
              <LockOutlined style="color: rgba(0, 0, 0, 0.25)" />
            </template>
          </a-input-password>
        </a-form-item>
        <a-form-item class="flex justify-center">
          <a-button class="w-96" type="primary" html-type="submit">登录</a-button>
        </a-form-item>
      </a-form>
      <div class="ml-2 flex justify-between w-96 mb-6">
        <a class="text-sm text-[#1677ff]" href="#">忘记密码？</a>
        <a class="text-sm text-[#1677ff]" @click="router.push('/register')">还没注册？</a>
      </div>
      <div class="ml-2 flex justify-between w-96 tracking-widest">
        <span>注册或登录即代表您同意
          <a class="text-sm text-[#1677ff]" href="#">《用户协议》</a>
          <span>和</span>
          <a class="text-sm text-[#1677ff]" href="#">《隐私协议》</a>
        </span>
      </div>
    </a-card>
  </div>

</template>
<style scoped></style>

